<template>
<el-drawer
    title="时间线"
    :visible.sync="timelineShow"
    :destroy-on-close="true"
    :append-to-body="true"
    width="65%"
    @close="handleClose"
    class="edit-main"
  >
  <div class="steps">
        <el-steps direction="vertical" :active="list.length" :space="'100px'">
      <el-step v-for="item in list"  icon ="el-icon-circle-check" :key="item.id" :title="item.createTime" :description="item.logContent"></el-step>
    </el-steps>
  </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确定</el-button>
    </div>
</el-drawer>
</template>

<script>
import { logList } from "@/api/taskManagement/taskList.js";
export default {
  name: "timelineDialog",
  props: {
    timelineDialogShow: {
      type: Boolean,
      default: false,
    },
    questionText: {
      type: String,
      default: "",
    },
    taskId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      list: [], //表格数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      timelineShow: false,
    };
  },

  watch: {
    timelineDialogShow: {
      handler(val) {
        if (val) {
          this.timelineShow = val;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 保存
    async getData() {
      const params = {
        id: this.taskId,
        pageNum: 1,
        pageSize: 1000,
      };
      const { code, rows } = await logList(params);
      if (code === 200) {
        this.list = rows
      }
    },

    handleClose() {
      this.timelineShow = false;
      this.$emit("onCloseTimelineDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.steps{
    padding: 10px;
}
</style>
